<%@ page import="org.xilin.Payment; org.xilin.Course; org.xilin.Family" %>

<g:setProvider library="jquery"/>

<div class="bar">
  <span class="left">Family Payment&nbsp;&nbsp;</span>
  <span class="left semester">
      Semester <x:semesterSelection semesterId="${session.activeSemester?.id}"/>
  </span>

  <span class="btn right">
    <a class="active" href="javascript:void(0)" onclick="$('.content').load('${request.contextPath}/family/list')">Back</a>
  </span>
</div>

<div class="ui-widget">
    <div class="ui-widget-content">
        <table>
            <tbody>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label><g:message code="family.fatherName.label" default="Father" /></label>
                    </td>
                    <td valign="top" class="value">
                      <label><input type="input" readonly value="${familyInstance?.fatherFirstName} ${familyInstance?.fatherLastName}"/></label>
                    </td>
                    <td>&nbsp;&nbsp;</td>
                    <td valign="top" class="name">
                        <label><g:message code="family.motherName.label" default="Mother" /></label>
                    </td>
                    <td valign="top" class="value">
                        <label><input type="input" readonly value="${familyInstance?.motherFirstName} ${familyInstance?.motherLastName}"/></label>
                    </td>
                    <td>&nbsp;&nbsp;</td>
                    <td valign="top" class="name">
                        <label><g:message code="family.balance.label" default="Balance" /></label>
                    </td>
                    <td valign="top" class="value">
                         <input type="input" class="amountDue" readonly value=""/>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
</div>

<div>
    <table class="payment" cellspacing="0">
        <g:each in="${studentList}" var="student" status="i">
            <g:render template="studentCost" model="['student':student, 'classes':student.classes, 'books':student.books]"/>
        </g:each>
        <tr>
          <td class="nobg" colspan="7">&nbsp;</td>
        </tr>
        <tr>
          <th class="specalt">Total Cost</th>
          <td class="familyTotal"></td>
          <td class="nobg" colspan="5"></td>
        </tr>
        <tr>
          <th class="specalt">Payment</th>
          <td class="totalPayment">${totalPayment?:0}</td>
          <td class="nobg" colspan="1"></td>
          <td class="" colspan="2">Payment Type</td>
          <td><g:select name="paymentType" from="${Payment.paymentTypes}" /></td>
          <td class="nobg" colspan="1"></td>
        </tr>
        <tr>
          <th class="specalt">Amount Due</th>
          <td class="amountDue"></td>
          <td class="nobg"></td>
          <td class="" colspan="2">Enter Payment Amount</td>
          <td><input type="text" name="payNow" class="payNow" style="width:100px"/></td>
          <td><input type="button" value="Pay Now" onclick="makePayment(${familyInstance.id})"/></td>
        </tr>
    </table>
</div>

<script>
    $(function() {
        var totalCost = 0;
        $('.totalCost').each(function(){
            totalCost += Number($(this).text());
        });
        $('td.familyTotal').text(totalCost);
        var amountDue = totalCost - Number($('.totalPayment').text());
        $('td.amountDue').text(amountDue);
        $('input.amountDue').val(amountDue);
    });

    function makePayment(familyId) {
        var args = {
            url: "http://${request.getHeader('host')}${request.getContextPath()}/family/adminMakePayment",
            data: {
                familyId : familyId,
                paymentType : $("#paymentType :selected").text(),
                amount : $(".payNow").val()
            },
            success: function(response){
                if (response == "true") {
                    var totalCost = Number($('td.familyTotal').text());
                    var totalPayment = Number($('.totalPayment').text()) + Number($(".payNow").val());
                    var amountDue = totalCost - totalPayment;
                    $('.totalPayment').text(totalPayment);
                    $('td.amountDue').text(amountDue);
                    $('input.amountDue').val(amountDue);
                    $('input.payNow').val(0);
                    showMessage("Payment received.");
                }
                else {
                    showMessage("Failed to save payment info.");
                }

            }
        }
      
        post(args);
    }


</script>